<template>
<head-five :active-index="activeIndex"></head-five>
<el-row>
<el-col class="flex justify-center">
  <el-card shadow="always" style="margin: 5%  10px 10px 10px" class="card">
    <el-col class="flex justify-center" style="padding: 30px;">
      <p class="font-bold text-2xl">溯源码打印管理</p>
    </el-col>
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
    >
      <el-form-item label="样式选择" prop="name" label-width="50%" size="large" style="padding-right: 35%;">
        <el-input v-model="form.name" disabled />
      </el-form-item>
      <el-form-item label="产品名称" prop="cpmc" label-width="50%" size="large" style="padding-right: 35%;">
        <el-select v-model="form.cpmc" clearable placeholder="请选择" style="width: 100%;">
          <el-option
              v-for="(item, index) in CpName"
              :key="index"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="批次号" prop="pch" label-width="50%" size="large" style="padding-right: 35%;">
        <el-select v-model="form.pch" clearable placeholder="请选择" style="width: 100%;">
          <el-option
              v-for="(item, index) in pchOptions"
              :key="index"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否下载" label-width="50%" size="large" style="padding-right: 35%;">
        <el-radio-group v-model="form.printf">
          <el-radio label="yes" size="large" @change="changeOption" border>是</el-radio>
          <el-radio label="no" size="large" @change="changeOption" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="flex justify-center">
      <el-button class="min-w-sm"
                 type="primary"
                 size="large" round
                 @click="handleConfirm"
      >
        立即创建二维码</el-button>
    </div>
  </el-card>
  <dialog-qr
      v-model="dialogVisible"
      v-if="dialogVisible"
      :qr-image="qrImage"
      :symListTable="symListTable"
  >
  </dialog-qr>
</el-col>
</el-row>
</template>

<script setup>
import HeadFive from "@/components/header/headFive.vue";

import {onMounted, ref, watch} from "vue";
import {getAllCpmc, getCpmc, getPchByCpmc} from "@/api/apiPath/twoPart.js";
import {ElNotification} from "element-plus";
import DialogQr from "@/components/dialog/five/dialogQr.vue";
import QRCode from 'qrcode';
import JSZip from "jszip";
import {saveAs} from "file-saver"
import {addSlInfo, putQrData} from "@/api/apiPath/fivePart.js";
import {useSymContentStore} from "@/stores/myStore.js";
import {getOptionInfo, getOptionsInfo, initFormInfo} from "@/api/methods/initInfo.js";
import {addAndGetData} from "@/api/methods/addInfo.js";

const qrImage = ref('')
const activeIndex = '/symInfo'
const formRef = ref(null)
const form = ref({
  name: '普通标签二维码',
  cpmc: '',
  pch: '',
  printf: "no"
})
const CpName = ref([])
const pchOptions = ref([])
const dialogVisible = ref(false)
const symListTable = ref({})
const rules = ref({
  name: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  cpmc: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  pch: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const SymTableData = useSymContentStore()

onMounted(async ()=> {
    CpName.value = await getOptionInfo(getCpmc())
})
watch(
    () => form.value.cpmc,
    async (Cpmc) => {
      console.log(Cpmc);
      if (form.value.cpmc !== null && form.value.cpmc !== "") {
        pchOptions.value = await getOptionInfo(getPchByCpmc(Cpmc))
        console.log(pchOptions.value)
        form.value.pch = ''
      }
    },
    { deep: true, immediate: true }
)
const changeOption = ()=> {
  if (form.value.printf === "no") {
    form.value.printf = "no"
  } else {
    form.value.printf = "yes"
  }
}
const handleConfirm = async ()=> {
  formRef.value.validate( async valid => {
    if (!valid) {
      console.log("errorValid")
      ElNotification({
        message: "请完善打印信息！",
        type: 'error',
        duration: 1500
      })
    } else {
      try {
        console.log(form.value)
        symListTable.value = await addAndGetData(addSlInfo(), form)
        console.log(symListTable.value)
          // await initFormInfo(putQrData(form.value.pch), SymTableData.symData)

          // console.log(SymTableData.symData)
          SymTableData.sym = symListTable.value.sym
          console.log(SymTableData.sym)
        //JSON.stringify()是JavaScript内置的一个方法，用于将 JavaScript 值或对象转换为 JSON 字符串
        // ..sym/溯源码
          console.log(`http://124.222.148.103/#/sym/${symListTable.value.sym}`)
        qrImage.value = await QRCode.toDataURL(`http://124.222.148.103/#/sym/${symListTable.value.sym}`, {
          margin: 5,
          width: 200,
          height: 200,
          color: {
            dark: '#2dd4bf',
            light: '#ffffff',
          }
        })
        if (form.value.printf === "yes") {
            const zip = new JSZip()
            // console.log(qrImage.value)
            zip.file('溯源码.png', qrImage.value.split(',')[1], {base64: true})
          // console.log(qrImage.value.split(',')[1])
          // 类型设置为 blob，表示生成一个二进制文件流。
            zip.generateAsync({type: "blob"})
                .then(content => {
                  saveAs(content, "二维码.zip")
                })
        }
        dialogVisible.value = true
      } catch (err) {
        console.log("errorConfirm: " + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    }
  })
}

</script>

<style scoped>
.card {
  width: 60%;
  height: 100%;
}
</style>